<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Seat Legend</title>
		<link rel="stylesheet" href="casting.css">

	</head>
	<body>
		

		<div class="seat-legend">
			<ul>
				<li><i style="background-image: url(https://gw.alicdn.com/tfs/TB1t5BlEeL2gK0jSZPhXXahvXXa-220-464.png);"
						class="tpp-i i-normal core"></i>可选</li>
				<li><i style="background-image: url(https://gw.alicdn.com/tfs/TB1t5BlEeL2gK0jSZPhXXahvXXa-220-464.png);"
						class="tpp-i i-sold core"></i>已售</li>
				<li><i style="background-image: url(https://gw.alicdn.com/tfs/TB1t5BlEeL2gK0jSZPhXXahvXXa-220-464.png);"
						class="tpp-i i-best-area"></i>最佳观影区</li>
			</ul>
		</div>
		<div class="hall">
			<div class="screen" style="transform: translateX(0px);">
				<div class="screen-name">6号厅 银幕</div>
			</div>
		</div>

		<div class="div1">

			<div class="div2">
				
				
				
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<div class="checkbox-container">
					<span class="custom-checkbox">
						<input type="checkbox" id="checkbox3">
						<label for="checkbox3"></label>
					</span>
				</div>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<span>
									<hr style="border:1px dashed #8b8c8c;height:370px">
								</span>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<div class="checkbox-container">
					<span class="custom-checkbox">
						<input type="checkbox" id="checkbox3">
						<label for="checkbox3"></label>
					</span>
				</div>
				<span><input type="checkbox"></span>
				
				<span><input type="checkbox"></span>
				<div class="checkbox-container">
					<span class="custom-checkbox">
						<input type="checkbox" id="checkbox3">
						<label for="checkbox3"></label>
					</span>
				</div>
				<span><input type="checkbox"></span>
			</div>
			<div class="div2">
				
				
				
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<div class="checkbox-container">
					<span class="custom-checkbox">
						<input type="checkbox" id="checkbox3">
						<label for="checkbox3"></label>
					</span>
				</div>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<div class="checkbox-container">
					<span class="custom-checkbox">
						<input type="checkbox" id="checkbox3">
						<label for="checkbox3"></label>
					</span>
				</div>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<div class="checkbox-container">
					<span class="custom-checkbox">
						<input type="checkbox" id="checkbox3">
						<label for="checkbox3"></label>
					</span>
				</div>
				<span><input type="checkbox"></span>
			</div>
			<div class="div2">
				
				
				
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<div class="checkbox-container">
					<span class="custom-checkbox">
						<input type="checkbox" id="checkbox3">
						<label for="checkbox3"></label>
					</span>
				</div>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<div class="checkbox-container">
					<span class="custom-checkbox">
						<input type="checkbox" id="checkbox3">
						<label for="checkbox3"></label>
					</span>
				</div>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<div class="checkbox-container">
					<span class="custom-checkbox">
						<input type="checkbox" id="checkbox3">
						<label for="checkbox3"></label>
					</span>
				</div>
				<span><input type="checkbox"></span>
			</div>


			<hr width=790 style="border:1px dashed #fa91ad;height:1px;margin-bottom: -10px;"></span>
			<div class="div2" id="div1">
				<span>
					<hr style="border:1px dashed #fa91ad;height:179px;margin-right: -2px;">
				</span>
				
				<span><input type="checkbox"></span>
				
				
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<div class="checkbox-container">
					<span class="custom-checkbox">
						<input type="checkbox" id="checkbox3">
						<label for="checkbox3"></label>
					</span>
				</div>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<span>
					<hr style="border:1px dashed #fa91ad;height:179px;margin-left: -1px;">
				</span>
			</div>
			<div class="div2" id="div2">
				<span><input type="checkbox"></span>
				
				
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<div class="checkbox-container">
					<span class="custom-checkbox">
						<input type="checkbox" id="checkbox3">
						<label for="checkbox3"></label>
					</span>
				</div>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
			</div>
			<div class="div2" id="div3">
				<span><input type="checkbox"></span>
				
				
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<div class="checkbox-container">
					<span class="custom-checkbox">
						<input type="checkbox" id="checkbox3">
						<label for="checkbox3"></label>
					</span>
				</div>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
			</div>
			<hr width=790 style="border:1px dashed #fa91ad;height:1px;margin-top:1px ;">
			<div class="div2">
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				
				
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<div class="checkbox-container">
					<span class="custom-checkbox">
						<input type="checkbox" id="checkbox3">
						<label for="checkbox3"></label>
					</span>
				</div>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
			</div>
			<div class="div2">
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				
				
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<div class="checkbox-container">
					<span class="custom-checkbox">
						<input type="checkbox" id="checkbox3">
						<label for="checkbox3"></label>
					</span>
				</div>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
			</div>
			<div class="div2">
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				
				
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<div class="checkbox-container">
					<span class="custom-checkbox">
						<input type="checkbox" id="checkbox3">
						<label for="checkbox3"></label>
					</span>
				</div>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
			</div>
			<div class="div2">
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				
				
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<div class="checkbox-container">
					<span class="custom-checkbox">
						<input type="checkbox" id="checkbox3">
						<label for="checkbox3"></label>
					</span>
				</div>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
			</div>
			<div class="div2">
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				
				
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<div class="checkbox-container">
					<span class="custom-checkbox">
						<input type="checkbox" id="checkbox3">
						<label for="checkbox3"></label>
					</span>
				</div>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
				<span><input type="checkbox"></span>
			</div>





		</div>

		<div class="divone">
			<p style="color: deeppink; font-size: 10px;">潜行</p>
			<div class="main">
				<div class="item1">今天 12月30日 15：20---21：20 国语 2</div>
				<div class="item2"></div>
				<div class="item3"><button style="color:blue;border: 0;background-color: #f5f5f5;"
						onclick="toggleContent()">收起场次</button></div>
			</div>
			<div class="divtwo" id="content">
				<button class="niceButton3" onclick="toggleText()">
					<p>15:20</p><br>
					<p>国语</p><br>
					<p style="color: deeppink; " id="paragraph2" style="display: none;">52.3$</p>
				</button>
				<button class="niceButton3">
					<p>16:20</p><br>
					<p>国语</p><br>
					<p style="color: deeppink;"  id='span1'>54.3$</p>
				</button>
				<button class="niceButton3">
					<p>17:20</p><br>
					<p>国语</p><br>
					<p style="color: deeppink;">56.3$</p>
				</button>
				<button class="niceButton3">
					<p>18:20</p><br>
					<p>国语</p><br>
					<p style="color: deeppink;">58.3$</p>
				</button>
				<button class="niceButton3">
					<p>19:20</p><br>
					<p>国语</p><br>
					<p style="color: deeppink;">59.3$</p>
				</button>
				<button class="niceButton3">
					<p>20:20</p><br>
					<p>国语</p><br>
					<p style="color: deeppink;">54.3$</p>
				</button>
				<button class="niceButton3">
					<p>21:20</p><br>
					<p>国语</p><br>
					<p style="color: deeppink;">60.3$</p>
				</button>


			</div>
			
			<div class="end1" id="box2" style="display: none;">
				 <div class="tag">
				 	<span>3排2座</span>
				 	<span style="color: #f31da5;">$52.3</span>
				 	 
				  </div>
				 <div class="tag">
				 	<span>3排5座</span>
				 	<span style="color: #f31da5;">$52.3</span>
				 	
				 </div>
			</div>
			
			<div ">
				<ul >
					<li style="font-size: 15px; " >推荐座位</li>
					<li><button class="three" onclick="selectCheckboxes('div1', 1)" ><span >1</span>人</button></li>
					<li><button class="three" onclick="selectCheckboxes('div1', 2)" id="toggleButton"><span id="num2">2</span>人</button></li>
					<li><button class="three" onclick="selectCheckboxes('div2', 3)"><span>3</span>人</button></li>
					<li><button class="three" onclick="selectCheckboxes('div2', 4)"><span>4</span>人</button></li>
					<li><button class="three" onclick="selectCheckboxes('div3', 5)"><span>5</span>人</button></li>
					<li><button class="three" onclick="selectCheckboxes('div3', 6)"><span>6</span>人</button></li>

				</ul>
			</div>
			
			<div class="ends" >
				
				<button class="niceButton5" onclick="redirectToOtherPage()"><span id="paragraph1">确认选座</span></button>
				<a href="../../fk/css/one.html" id="redirectLink"></a>
			</div>
		</div>
		<div class="round3">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
			<div>6</div>
			<div>7</div>
			<div>9</div>
			<div>10</div>
			<div>11</div>
			
			


		</div>
		<script>
			function toggleContent() {
				var content = document.getElementById("content");
				if (content.style.display === "none") {
					content.style.display = "block";
				} else {
					content.style.display = "none";
				}
			}
			// 选择复选框的函数
			function selectCheckboxes(divId, numberOfCheckboxes) {
				var checkboxes = document.querySelectorAll('.div1 #' + divId + ' input[type="checkbox"]');
				var selectedCheckboxes = [];
				var randomIndexes = [];
				

				// 生成随机不重复的索引
				while (randomIndexes.length < numberOfCheckboxes) {
					var randomIndex = Math.floor(Math.random() * checkboxes.length);
					if (!randomIndexes.includes(randomIndex)) {
						randomIndexes.push(randomIndex);
					}
				}

				// 选中随机索引对应的复选框
				randomIndexes.forEach(function(index) {
					checkboxes[index].checked = true;
				});
				//乘积
				var paragraph2 = parseInt(document.getElementById("paragraph2").textContent);
				var num2 = parseInt(document.getElementById("num2").textContent);
				var paragraph1 = paragraph2 * num2;
							
				document.getElementById("paragraph1").textContent = "合计："+paragraph1 +'$' +'确认选座'
		
		alert("座位已经选好啦！")
			}
			
			
			//按钮事件
			
			
			var paragraph1 = document.getElementById("paragraph1");
			var paragraph2 = document.getElementById("paragraph2");
			var showingFirstParagraph = true;
			var originalContent = paragraph2.textContent;
			
			function toggleText() {
			  if (showingFirstParagraph) {
			    // 隐藏第一个段落，显示第二个段落的内容
			    paragraph1.textContent = paragraph2.textContent;
			    paragraph2.textContent = originalContent;
			    showingFirstParagraph = false;
			  } else {
			    // 隐藏第二个段落，显示第一个段落的内容
			    paragraph2.textContent = paragraph1.textContent;
			    paragraph1.textContent = originalContent;
			    showingFirstParagraph = true;
			  }
			}
			
			function redirectToOtherPage() {
			  // 触发隐藏链接的点击事件
			  document.getElementById("redirectLink").click();
			}
			
			//
			document.getElementById('toggleButton').addEventListener('click', function() {
			    var content = document.getElementById('content');
			    var box2 = document.getElementById('box2');
			
			    // 检查content的状态并进行切换
			    if (content.style.display === 'block') {
			        content.style.display = 'none';
			        box2.style.display = 'block';
			    } else {
			        content.style.display = 'block';
			        box2.style.display = 'none';
			    }
			});
			//隐藏
			document.getElementById('toggleButton').addEventListener('click', function() {
			    var content = document.getElementById('content');
			    var box2 = document.getElementById('box2');
			
			    // 检查content的状态并进行切换
			    if (content.style.display === 'block') {
			        content.style.display = 'none';
			        box2.style.display = 'block';
			    } else {
			        content.style.display = 'block';
			        box2.style.display = 'none';
			    }
			});
			
			
		</script>

	</body>
</html>